<script setup lang="ts">
import { useMusicStore } from "@/store/modules/music";
import { storeToRefs } from "pinia";
import * as MusicApi from "@/api/music";
import { useRouter } from "vue-router";
import { ArrowDown, EditPen } from "@element-plus/icons-vue";
import { useUserStore } from "@/store/modules/user";
import { getCurrentInstance, ComponentInternalInstance, nextTick } from "vue";
import { formatDate } from "@/utils";
import { ElMessage, ElLoading } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import { scrollTo } from "@/utils/scroll-to";
import { useDebounceFn } from "@vueuse/core";
import * as LyricModel from "@/common/model/lyric";
import * as CommentApi from "@/api/comment";
import * as CommentEnum from "@/enums/CommentEnum";
import CommentDialog from "./CommentDialog.vue";
import { DeleteCommentEnum, DeleteType } from "@/enums/SendORDeleteCommentEnum";

// 路由对象
const router = useRouter();
// 用户模块
const userStore = useUserStore();
// 音乐store
const musicStore = useMusicStore();
const { showMusicDetail, curMusicRecord } = storeToRefs(musicStore);
// 页面高度
const pageHeight = ref<number>(0);
// 当前歌曲歌词
const lyric = ref<string>("");
// 解析之后的歌词数据
const lyricData = ref<Array<any>>([]);
// 歌词滚动需要操作的dom
const dom = reactive<LyricModel.DomObject>({
  lyricContainer: null,
  lyricContentUl: null,
});
// 搜索歌曲请求参数
// const searchParam = reactive({
//   keyword: "",
// });
// 加载
const loading = reactive({
  // 评论加载
  comment: false,
  // 歌词加载
  lyric: false,
});

// 当页面滚动到某个位置时显示歌曲名称、歌曲作曲者名字
const showTitle = ref<boolean>(false);
const contentDom = ref<HTMLElement | null>(null);
// 右击删除评论项数据
const deleteCommentItem = ref<any>(null);
// 获取歌曲评论请求参数
const queryParams = reactive({
  // 总评论条数
  total: 0,
  // 一次返回50条数据
  limit: 50,
  // 偏移量，用于分页
  offset: 0,
  // 页码
  pageNum: 1,
  // 分页参数,取上一页最后一项的 time 获取下一页数据(获取超过 5000 条评论的时候需要用到)
  before: 0,
});

// 评论数据信息
const commentInfo = reactive({
  // 置顶评论
  topComments: [] as any,
  // 热门评论
  hotComments: [] as any,
  // 普通评论
  comments: [] as any,
});

// 评论标题
const titleTip = reactive({
  topComments: "置顶评论",
  hotComments: "精彩评论",
  comments: `全部评论(${queryParams.total})`,
});
// 发表评论弹窗
const CommentRef = ref<any>(null);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const left = ref(0);
const top = ref(0);

onMounted(() => {
  pageHeight.value = window.innerHeight;
  dom.lyricContentUl = document.querySelector(".lyric-content") as HTMLElement;
  dom.lyricContainer = document.querySelector(
    ".lyric-container"
  ) as HTMLElement;

  Object.assign(LyricModel.dom, dom);
});
// 鼠标右键菜单显示状态
const deleteMenuVisible = ref(false);
// 监听右键删除自己的评论弹窗的显示
watch(deleteMenuVisible, (value) => {
  if (value) {
    document.body.addEventListener("click", closeDeleteMenu);
  } else {
    document.body.removeEventListener("click", closeDeleteMenu);
  }
});
// 如果playIndex变了说明歌曲切换了，重新获取该首歌的歌曲歌曲评论
watch(
  () => musicStore.playIndex,
  (newVal, oldVal) => {
    const oldId =
      musicStore.curPlayList[oldVal as keyof typeof musicStore.curPlayList]?.id;
    const newId =
      musicStore.curPlayList[newVal as keyof typeof musicStore.curPlayList]?.id;
    // 同一首歌
    if (oldId == newId && !showMusicDetail.value) {
      return;
    }
    // 刷新歌曲评论歌词
    handRefresh();
  }
);

// 禁用页面滚动
watch(
  showMusicDetail,
  (newVal) => {
    if (newVal) {
      // 刷新歌曲评论歌词
      handRefresh();
      // 隐藏body的滚动条
      document.body.style.overflow = "hidden";
      // 获取整体的容器dom
      contentDom.value = document.querySelector(".content") as HTMLElement;
      // 监听页面滚动事件
      contentDom.value?.addEventListener("scroll", (e: Event) =>
        debouncedFn(e)
      );
    } else {
      document.body.style.overflow = "";
      contentDom.value?.removeEventListener("scroll", (e: Event) =>
        debouncedFn(e)
      );
    }
  },
  { immediate: true }
);
// 滚动防抖
const debouncedFn = useDebounceFn(
  (e: Event) => {
    if (
      (e.target as HTMLElement).scrollTop > (e.target as HTMLElement).offsetTop
    ) {
      showTitle.value = true;
    } else {
      showTitle.value = false;
    }
  },
  50,
  { maxWait: 5000 }
);

// 获取歌曲评论
function getSongComment() {
  // 开始加载
  loading.comment = true;
  MusicApi.getMusicComment({
    id: curMusicRecord.value.id,
    limit: queryParams.limit,
    offset: queryParams.offset,
    // before: queryParams.before,
  })
    .then((res) => {
      const { code, total } = res.data;
      if (code != 200) {
        return Promise.reject(new Error("获取歌曲评论失败"));
      }
      // 总评论条数
      queryParams.total = total;
      titleTip.comments = `全部评论(${total})`;
      // 置顶评论
      commentInfo.topComments = res.data.topComments || [];
      // 热门评论
      commentInfo.hotComments = res.data.hotComments || [];
      // 普通评论
      commentInfo.comments = res.data.comments || [];

      console.log("获取歌曲评论成功==>", res.data);
    })
    .catch((err) => {
      ElMessage.error(err || err.message || "获取歌曲评论失败");
      console.log("获取歌曲评论失败==>", err);
    })
    .finally(() => (loading.comment = false));
}

// 获取歌曲歌词
async function getSongLyric() {
  // 开始加载
  loading.lyric = true;
  await MusicApi.getSongLyric({
    id: curMusicRecord.value.id,
  })
    .then(async (res) => {
      const { code, lrc } = res.data;
      if (code != 200) {
        return Promise.reject(new Error("获取歌曲歌词失败"));
      }
      console.log("获取歌词成功==>", res.data);
      lyric.value = lrc.lyric;
      // 解析歌词字符串
      LyricModel.parseLrc(lyric.value);
      lyricData.value = LyricModel.lyricData.value;
      LyricModel.createLyricLiElement();
    })
    .catch((err) => {
      ElMessage.error(err || err.message || "获取歌曲歌词失败");
      console.log("获取歌曲歌词失败==>", err);
    })
    .finally(() => (loading.lyric = false));
}

// 分页事件触发回调
const handlePagination = (val: any) => {
  // 分页参数
  queryParams.offset = (val.page - 1) * val.limit;
  queryParams.before =
    commentInfo.comments[commentInfo.comments.length - 1].time;
  // 重新获取数据
  handRefresh(false);
  // 滚动到顶部
  scrollTo(0, 800, contentDom.value);
};

// 鼠标右键删除评论，只能删除属于自己的评论
const handleOpenDeleteMenu = (item: any, e: MouseEvent) => {
  const curUserId = userStore.profile.userId;
  if (item.user.userId != curUserId) return;
  // 弹出删除评论弹窗
  openDeleteCommentMenu(e);
  deleteCommentItem.value = item;
};

/**
 * 给歌单评论点赞/取消点赞
 */
const handleLikeSongListComment = (item: any, key: string) => {
  console.log("给歌单评论点赞/取消点赞==>", item);
  CommentApi.LikeTheComments({
    id: curMusicRecord.value.id,
    cid: item.commentId,
    t: item.liked
      ? CommentEnum.LikeTheCommentEnum.unlike
      : CommentEnum.LikeTheCommentEnum.like,
    type: CommentEnum.CommentTypeEnum.song,
  })
    .then((res) => {
      const { code, message } = res.data;
      if (code != 200) {
        return Promise.reject(
          message || item.liked ? "取消点赞失败" : "点赞失败"
        );
      }
      const commentKey = key as keyof typeof commentInfo;
      commentInfo[commentKey].forEach((comment: any) => {
        if (comment.commentId == item.commentId) {
          comment.liked = !item.liked;
          comment.likedCount = item.liked
            ? comment.likedCount + 1
            : comment.likedCount - 1;
        }
      });
    })
    .catch((err) => {
      console.log("点赞/取消点赞失败失败==>", err);
      ElMessage.error(
        err || err.message || item.liked ? "取消点赞失败" : "点赞失败"
      );
    });
};

/**
 * 发表评论
 */
const handleComment = () => {
  CommentRef.value!.show(true);
};

/**
 * 回复评论
 */
const handleReply = (item: any) => {
  CommentRef.value!.replyComment(item);
};

/**
 * 删除歌曲自己的评论
 */
const handleDeleteComment = () => {
  // 开始加载
  const loadingInstance = ElLoading.service({ fullscreen: true });
  MusicApi.sendOrDeleteComment({
    id: curMusicRecord.value.id,
    t: DeleteCommentEnum.delete,
    commentId: deleteCommentItem.value.commentId,
    type: DeleteType.song,
  })
    .then((res) => {
      const { code, message } = res.data;
      if (code != 200) {
        return Promise.reject(message || "删除评论失败");
      }
      // 刷新评论列表
      handRefresh();
      console.log("删除评论成功==>", res.data);
    })
    .catch((err) => {
      console.log("删除评论失败==>", err);
      ElMessage.error(err || err.message || "删除评论失败");
    })
    .finally(() => {
      nextTick(() => {
        // Loading should be closed asynchronously
        loadingInstance.close();
      });
    });
};

// 右键显示删除评论菜单
function openDeleteCommentMenu(e: MouseEvent) {
  // 弹窗的最小宽度
  const menuMinWidth = 120;
  const parent = (e.target as HTMLElement)?.parentElement;
  
  // 鼠标右键评论项距离视口左侧的距离
  const offsetLeft = parent?.getBoundingClientRect().left!;

  // 鼠标右键评论项的宽度width
  const offsetWidth = parent?.offsetWidth!;

  const maxLeft = (offsetWidth + parent!.clientWidth) - menuMinWidth;
  
  // 60 == 121 / 2 == 删除菜单容器宽度的一半
  const l = e.offsetX + offsetLeft;

  if (l > maxLeft) {
    left.value = maxLeft;
  } else {
    left.value = l;
  }
  
  // top值直接使用包含 删除评论菜单的父容器的offsetTop, parentElement是返回父节点的Element类型，parentNode则是返回Node类型，所以这里选parentElement
  top.value = parent!.offsetTop + 30;
  
  // 显示弹窗
  deleteMenuVisible.value = true;
}

/**
 * 监听歌曲封面图片加载完成
 */
function loadSongPoster() {
  // console.log("歌曲封面图片加载完成");
}

// 跳转到用户个人主页
function onTargetUserProfile(item: any) {
  // 先关闭再跳转
  close();
  router.push(`/user/user-profile?userId=${item.user?.userId}`);
}

/**
 * 关闭右键删除评论弹窗
 */
function closeDeleteMenu() {
  deleteMenuVisible.value = false;
}

// 显示音乐详情页
function show(show: boolean) {
  showMusicDetail.value = show;
}

// 关闭音乐详情页
function close() {
  showMusicDetail.value = false;
}

function handleImgLoad() {}

/**
 * 刷新
 * @param bool 是否刷新指定数据
 */
function handRefresh(bool: boolean = true) {
  // 重新获取歌曲评论列表
  getSongComment();
  // 重新获取歌曲歌词
  bool && getSongLyric();
}

defineExpose({
  show,
});
defineOptions({
  name: "MusicDetail",
});
</script>

<template>
  <!-- 这里最好不要用top，因为会导致动画卡顿，推荐用transform，因为transform不会导致浏览器重绘 -->
  <div
    class="music-container"
    :style="{
      opacity: showMusicDetail ? 1 : 0,
      transform: showMusicDetail
        ? 'translateY(0px)'
        : `translateY(${pageHeight}px)`,
    }"
  >
    <!-- 音乐详情顶部：搜索框、全屏 -->
    <div class="header">
      <div class="float-left ml-[15px] cursor-pointer" @click="close">
        <el-icon size="23"><ArrowDown /></el-icon>
      </div>

      <div
        class="song-title flex flex-col items-center"
        :style="{
          opacity: showTitle ? '1' : '0',
          transform: showTitle ? 'translateY(0px)' : 'translateY(30px)',
        }"
      >
        <div class="song-name">{{ curMusicRecord?.name }}</div>
        <div class="singer-name" v-show="curMusicRecord?.ar?.length">
          作曲：
          <span
            v-for="alia in curMusicRecord?.ar"
            class="singer-name cursor-pointer truncate"
            style="max-width: 30%"
            :key="alia.id"
            >{{ alia.name }}</span
          >
        </div>
      </div>
    </div>

    <div class="content">
      <!-- 音乐详情内容 -->
      <div class="music-content">
        <!-- 左侧黑胶唱片 -->
        <div class="left-song-cover">
          <!-- 唱片臂 -->
          <div class="song-arm">
            <!-- 这里通过类名控制唱片臂的旋转角度 -->
            <img
              :class="{
                'rotate-[-10deg]': musicStore.status,
                'rotate-[-45deg]': !musicStore.status,
              }"
              class="w-full h-full rotate-[-10deg]"
              src="@/assets/music/arm.png"
              mode="aspectFit"
            />
          </div>

          <!-- 黑胶唱片，这里控制图片旋转 -->
          <div
            class="song-disc"
            :class="{ rotate: musicStore.status }"
            :style="{
              'animation-play-state': !musicStore.status ? 'paused' : 'running',
            }"
          >
            <img
              class="w-full h-full"
              src="https://oss.chaosageservice.com/eap/2023/2/23/023541585.png"
              mode="aspectFill"
            />
            <!-- 歌曲封面海报 -->
            <img
              class="song-poster"
              :src="curMusicRecord?.al?.picUrl"
              mode="aspectFill"
              @load="loadSongPoster"
            />
          </div>
        </div>

        <!-- 右侧歌词 -->
        <div class="right-lyric">
          <div class="music-info">
            <div class="music-name">{{ curMusicRecord?.name }}</div>
            <div class="music-desc">
              <span v-if="curMusicRecord?.ar?.length">
                歌手：
                <span
                  v-for="alia in curMusicRecord?.ar"
                  class="singer-name cursor-pointer truncate"
                  style="max-width: 30%"
                  :key="alia.id"
                  >{{ alia.name }}</span
                >
              </span>
              <span v-else>未知歌手</span>

              <span class="mx-[10px] cursor-pointer"
                >专辑：{{ curMusicRecord?.al?.name }}</span
              >
              <span>来源：Youarefortunate</span>
            </div>
          </div>

          <div class="lyric-container">
            <ul
              v-loading="loading.lyric"
              v-show="lyricData.length"
              class="lyric-content"
              element-loading-text="歌词加载中..."
              element-loading-background="rgba(255,255,255,0)"
            >
              <li
                v-for="(item, index) in lyricData"
                :key="index"
                class="lyric-item"
              >
                <span v-if="item.words">{{ item.words }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 歌曲评论 -->
      <div class="music-comment">
        <div v-show="!loading.comment" v-for="(value, key) in commentInfo">
          <div
            v-if="value.length"
            class="flex flex-col items-center justify-center"
          >
            <!-- 评论标题：置顶评论、热门评论、最新评论标题 -->
            <div class="font-bold text-[20px] mb-[15px]">
              {{ titleTip[key] }}
            </div>

            <div
              v-for="item in value"
              :key="item.commentId"
              class="comment-item flex items-center mb-[20px]"
              @contextmenu.prevent="handleOpenDeleteMenu(item, $event)"
            >
              <!-- 用户头像 -->
              <div class="relative mr-[15px]">
                <el-avatar
                  class="user-avatar"
                  size="large"
                  :src="item.user?.avatarUrl"
                  fit="cover"
                />
                <img
                  v-show="item.user.avatarDetail?.identityIconUrl"
                  class="ident-icon object-cover w-[20px] h-[20px]"
                  :src="item.user.avatarDetail?.identityIconUrl"
                />
              </div>
              <!-- 用户名称、评论的内容 -->
              <div class="content">
                <div class="flex flex-wrap mb-[5px]">
                  <div class="nickname flex items-center">
                    <span class="mr-[2px]" @click="onTargetUserProfile(item)">{{
                      item.user?.nickname
                    }}</span>
                    <el-image
                      v-if="item.user?.vipRights?.associator?.iconUrl"
                      style="width: 35px; height: 13px"
                      :src="
                        item.user?.vipRights?.redplus?.iconUrl
                          ? item.user?.vipRights?.redplus?.iconUrl
                          : item.user?.vipRights?.associator?.iconUrl
                      "
                      fit="cover"
                    />
                    &nbsp;:&nbsp;
                  </div>
                  <span class="text-[13px]">{{ item.content }}</span>
                </div>

                <!-- 回复评论 -->
                <div
                  v-if="item.beReplied.length"
                  class="be-replied"
                  :style="{
                    'text-align':
                      item.beReplied[0].content == null ? 'center' : 'left',
                  }"
                >
                  <span
                    class="nickname"
                    v-show="item.beReplied[0].content != null"
                  >
                    @{{ item.beReplied[0].user.nickname }}&nbsp;:&nbsp;
                  </span>
                  <span v-show="item.beReplied[0].content != null">{{
                    item.beReplied[0].content
                  }}</span>

                  <span v-show="item.beReplied[0].content == null"
                    >该评论已删除</span
                  >
                </div>

                <div class="flex items-center justify-between">
                  <!-- 刚评论不久 -->
                  <div
                    v-if="item.timeStr.split('-').length <= 1"
                    class="comment-time"
                  >
                    {{ item.timeStr }}
                  </div>
                  <!-- 评论了几天或者更久 -->
                  <div
                    v-show="item.timeStr.split('-').length > 1"
                    class="comment-time"
                  >
                    {{ formatDate(item.time) }}
                  </div>

                  <div class="flex items-center comment-action">
                    <!-- 点赞 -->
                    <svg-icon
                      color="rgb(140, 140, 140)"
                      class="cursor-pointer icon"
                      size="18px"
                      v-show="!item.liked"
                      icon-class="dianzan"
                      @click="handleLikeSongListComment(item, key)"
                    />
                    <!-- 已点赞 -->
                    <svg-icon
                      color="rgb(255,58,58)"
                      class="cursor-pointer ml-[10px] icon"
                      size="18px"
                      v-show="item.liked"
                      icon-class="yidianzan"
                      @click="handleLikeSongListComment(item, key)"
                    />
                    <span v-show="item.likedCount" class="ml-[2px] text-xs">{{
                      item.likedCount
                    }}</span>
                    <!-- 评论转发 -->
                    <svg-icon
                      color="rgb(140, 140, 140)"
                      class="cursor-pointer ml-[10px] icon"
                      size="16px"
                      icon-class="pinglunzhuanfa"
                      @click="TTUL('评论转发功能暂未实现')"
                    />
                    <!-- 回复评论 -->
                    <svg-icon
                      color="rgb(140, 140, 140)"
                      class="cursor-pointer ml-[10px] icon"
                      size="18px"
                      icon-class="huifu"
                      @click="handleReply(item)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 歌曲评论加载loading -->
        <div
          class="w-full h-200px flex items-center"
          v-show="loading.comment"
          v-loading.lock="loading.comment"
          element-loading-text="加载歌曲评论中..."
          element-loading-background="rgba(255,255,255,0)"
        ></div>
      </div>

      <!-- 分页组件 -->
      <div class="pb-[50px] flex items-center justify-center">
        <pagination
          :auto-scroll="false"
          :total="queryParams.total"
          v-model:limit="queryParams.limit"
          v-model:page="queryParams.pageNum"
          @pagination="handlePagination"
        />
      </div>

      <!-- 鼠标右键显示删除评论弹窗 -->
      <div
        v-show="deleteMenuVisible"
        class="delete-menu"
        :style="{ left: left + 'px', top: top + 'px' }"
      >
        <div @click="handleDeleteComment" class="action flex items-center">
          <el-icon><Delete /></el-icon>
          <span class="ml-[10px]">删除(Delete)</span>
        </div>
      </div>
    </div>

    <div class="edit-comment" @click="handleComment" v-show="showMusicDetail">
      <el-icon><EditPen /></el-icon>
      <span class="ml-[10px]">快来说点什么吧</span>
    </div>

    <!-- 背景图片高斯模糊形成渐变效果 -->
    <img
      class="object-fill bg-poster"
      v-show="showMusicDetail"
      :src="curMusicRecord.al?.picUrl"
      :draggable="false"
      @load="handleImgLoad"
    />

    <CommentDialog ref="CommentRef" @handFinish="handRefresh(false)" />
  </div>
</template>

<style lang="scss" scoped>
.music-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3000;
  width: 100%;
  padding: 20px 4px 20px 20px;
  height: calc(100% - 100px);
  transition: all 0.4s linear;
  background-image: linear-gradient(
    to bottom,
    #c2c3c2,
    #c8cac9,
    #cfd0d0,
    #d6d6d7,
    #dddddd,
    #e2e2e2,
    #e7e7e7,
    #ececec,
    #f1f1f1,
    #f5f5f5,
    #fafafa,
    #ffffff
  );
}
.bg-poster {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -2;
  width: 100%;
  height: 100vh;
  transform: translateY(-70%);
  filter: blur(1000px);
  -webkit-filter: blur(1000px);
}

.header {
  white-space: nowrap;
  .song-title {
    transition: all 0.4s;
    .song-name {
      color: #454244;
      font-size: 15px;
    }
    .singer-name {
      font-size: 11px;
      color: #757375;
      margin-bottom: 10px;
    }
  }
}

// 纵向滚动条
@mixin scroll-bar($width: 10px) {
  /*定义滚动条外层轨道的样式*/
  &::-webkit-scrollbar-track {
    border-radius: 10px;
    // background-color: rgba(255,255,255,0);
  }
  /*定义滚动条整体的样式*/
  &::-webkit-scrollbar {
    width: $width;
    // height: 100px;
    background-color: rgba(255, 255, 255, 0);
  }
  /*滚动条里面可以拖动的那个*/
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.2);
  }
}

.content {
  position: relative;
  height: calc(100% - 50px);
  overflow-y: scroll;

  @include scroll-bar(10px);
  // 隐藏滚动条
  // &::-webkit-scrollbar {
  //   display: none;
  // }
  .delete-menu {
    position: absolute;
    z-index: 99;
    font-size: 12px;
    background: var(--el-bg-color-overlay);
    border-radius: 4px;
    box-shadow: var(--el-box-shadow-light);
    .action {
      padding: 8px 16px;
      cursor: pointer;
      &:hover {
        border-radius: 4px;
        background: var(--el-fill-color-light);
      }
    }
  }
}

// 旋转动画
.rotate {
  animation: rotate 15s linear infinite;
}

// 选择动画，顺时针旋转
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.music-content {
  height: 70%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  // 只有一行
  grid-template-rows: 1fr;
  gap: 40px;
  margin: 30px 30px 50px 180px;

  .left-song-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 唱片臂
    .song-arm {
      width: 100px;
      height: 170px;
      position: absolute;
      right: 45%;
      top: -10px;
      transform: translateX(50%);
      z-index: 2;
      & > img {
        transition: all 0.5s ease;
        // 播放时的旋转角度
        // transform: rotate(-10px);
        // 未播放时的旋转角度
        // transform: rotate(-45deg);
        // 旋转中心为元素左上角
        transform-origin: top left;
      }
    }
    // 黑胶唱片
    .song-disc {
      position: relative;
      z-index: 1;
      width: 380px;
      height: 380px;
      margin-top: 60px;
      border-radius: 50%;
      border: 15px solid rgba(211, 200, 200, 0.8);
      & img:nth-child(1) {
        transform: scale(1.04);
      }
      // 歌曲封面图片
      .song-poster {
        width: 55%;
        height: 55%;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  // 右侧歌词
  .right-lyric {
    min-width: 99%;
    height: 500px;
    overflow: hidden;
    .music-info {
      height: 20%;
      white-space: nowrap;
      margin-bottom: 20px;
      .music-name {
        font-size: 20px;
        margin-bottom: 5px;
      }
      .music-desc {
        color: #636263;
        font-size: 12px;
      }
    }

    .lyric-container {
      width: 100%;
      height: calc(80% - 20px);
      overflow: hidden;
      list-style: none;
      transition: 0.6s;
      overflow-y: hidden;
      // overflow-y: scroll;
      padding-top: 70px;
      /* 当前播放歌词高亮样式 */
      // padding-top: 50px;
      // @include scroll-bar(10px);
      // 隐藏滚动条
      // &::-webkit-scrollbar {
      //   display: none;
      // }
      -webkit-mask-image: linear-gradient(
        180deg,
        hsla(0, 0%, 100%, 0) 0,
        hsla(0, 0%, 100%, 0.6) 5%,
        #fff 25%,
        #fff 95%,
        hsla(0, 0%, 100%, 0.6) 85%,
        hsla(0, 0%, 100%, 0)
      );
      .lyric-content {
        transition: 0.2s;
        .lyric-item {
          font-size: 13px;
          color: #767676;
          padding-bottom: 10px;
        }
        & .lyric-active {
          color: black;
          font-weight: 600;
          font-size: 16px;
        }
      }
    }
  }
}

.music-comment {
  // position: relative;
  // padding-bottom: 40px;
  .comment-item {
    width: 50%;
    padding-bottom: 15px;
    &:not(:last-child) {
      border-bottom: 2px solid rgba(197, 196, 196, 0.4);
    }
    .ident-icon {
      position: absolute;
      bottom: 4px;
      right: -3px;
    }
    .content {
      width: 100%;
      .nickname {
        color: rgb(98, 154, 232);
        cursor: pointer;
        font-size: 13px;
      }
      .comment-time {
        // color: #9a9a9a;
        font-size: 13px;
      }
      .be-replied {
        background-color: rgba(105, 105, 105, 0.1);
        border-radius: 5px;
        font-size: 13px;
        padding: 10px 15px;
        margin-bottom: 10px;
      }
    }
  }
}

.edit-comment {
  position: fixed;
  right: 5%;
  bottom: 130px;
  transform: translateX(-5%);
  display: flex;
  align-items: center;
  background-color: rgba(237, 237, 237, 0.7);
  border-radius: 50px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  &:hover {
    background-color: rgba(225, 225, 225, 0.7);
  }
}

// .delete-menu {
//   position: absolute;
//   z-index: 99;
//   font-size: 12px;
//   background: var(--el-bg-color-overlay);
//   border-radius: 4px;
//   box-shadow: var(--el-box-shadow-light);
//   .action {
//     padding: 8px 16px;
//     cursor: pointer;
//     &:hover {
//       background: var(--el-fill-color-light);
//     }
//   }
// }

:deep(.search) {
  text-align: right;
  margin-right: 15px;
  .el-input__wrapper {
    border-radius: 50px;
    box-shadow: none;
    padding: 3px 13px;
    background-color: rgba(237, 237, 237, 0.6);
    .el-input__prefix {
      font-size: 20px;
      color: #656163;
    }
    .el-input__inner {
      color: #454244;
      &::placeholder {
        color: #5f5c5e;
      }
    }
  }
}
</style>
